<template>
  <view>
    <view class="select-wrap">
      <view class="title c7">
        (必选)&nbsp;请选择你想反馈的问题点
      </view>
      <radio-group @change="radioChange" class="radio-group">
        <label v-for="(item, index) in items" :key="item.value">
          <view>
            <radio :value="item.value" :checked="index === current" />
          </view>
          <view class="name">{{item.name}}</view>
        </label>
      </radio-group>
    </view>
    <view class="describe">
      <view class="title c7">
        请补充详细问题和意见
      </view>
      <view class="content">
        <textarea placeholder="请输入不少于十个字的描述"></textarea>
      </view>
      <view class="upload-wrap">
        <view class="title">
          <text>请提供相关问题的截图或者照片</text>
          <text class="c8">0/4</text>
        </view>
        <view class="upload">
          <uni-icon type="plusempty" size="40" class="text1" color="#aaa"></uni-icon>
          <text class="text2">相机/相册</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import uniIcon from "@dcloudio/uni-ui/lib/uni-icon/uni-icon.vue";


export default {
  components: {
    uniIcon
  },
  data() {
    return {
      current: 0,
      items: [
        {
          value: "USA",
          name: "功能异常：功能故障或不可用"
        },
        {
          value: "CHN",
          name: "产品建议：用的不爽，我有建议",
          checked: "true"
        },
        {
          value: "BRA",
          name: "安全问题：密码、隐私、欺诈等"
        },
        {
          value: "JPN",
          name: "其他问题"
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
@import "../../../styles/global/index";
.select-wrap {
  .title {
    height: 90upx;
    line-height: 90upx;
    padding: 0 60upx;
  }
}
.radio-group {
  background: #fff;
  padding: 20upx 60upx;
  label {
    display: flex;
    margin-bottom: 20upx;
    .name {
      padding-left: 20upx;
    }
  }
}
.describe {
  .title {
    height: 90upx;
    line-height: 90upx;
    padding: 0 60upx;
  }
  .content {
    flex: 1;
    background: #fff;
    padding: 20upx 0;
    height: 240upx;
    textarea {
      padding: 0 60upx;
    }
  }
  .upload-wrap {
    margin-top: 20upx;
    background: #fff;
    padding-bottom: 40upx;
    .title {
      padding: 0 60upx;
      @include flex-bw;
    }
    .upload {
      @include size(130upx, 130upx);
      border: 1px solid #ddd;
      margin-left: 60upx;
      display: flex;
      flex-direction: column;
      align-items: center;
      .text1{
        line-height: .9;
      }
      .text2 {
        font-size: 24upx;
        color:#999;
      }
    }
  }
}
</style>